<!--
 * @Author: fj
 * @LastEditors: fj
 * @description: 文件预览
 * @updateInfo: 本次更新内容：
 * @Date: 2023-06-08 11:01:13
 * @LastEditTime: 2023-10-23 15:46:41
-->
<script lang="ts" setup name="IkPreivewFile">
import { Download, View } from '@element-plus/icons-vue'
import { IkPreviewFile as IkFile } from 'iking-web-ui'
const props = defineProps({
  /** @param  是否显示下载按钮 */
  showDownloadBtn: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  /** @param  文件名称是否可以点击下载 */
  titleIsClick: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  /** @param  是否显示预览按钮 */
  showPreviewBtn: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /** @param  是否纯图片数据 */
  isImageList: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /** @param  预览文件数据 */
  fileList: {
    type: Array<{ [key: string]: any; }>,
    default: () => {
      return []
    }
  },
  /** @param  预览文件大小显示 */
  showFileSize: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  /** @param  预览文件字段 */
  defaultFields: {
    type: Object,
    default: () => {
      return {
        name: 'name',
        url: 'url',
        size: 'size'
      }
    }
  },
  // 是否默认拼接location.pathname
  locationPath: {
    type: Boolean,
    default: true
  }
})
const { setFileUrl } = useHttpUrl()
const loading = ref(false)
const show = ref(false)
const fileObj: Ref<{
  url: string
  name: string
} | null> = ref(null)

const { VITE_APP_DOWNLOAD_URL, VITE_APP_PREVIEW_URL, VITE_KKFILE_URL } = import.meta.env
const LOCATION_PATH = props.locationPath ? location.pathname : ''
const PREVIEW_URL = VITE_APP_PREVIEW_URL || VITE_KKFILE_URL

const FIX_LOAD_URL = VITE_APP_DOWNLOAD_URL.startsWith('http') ? VITE_APP_DOWNLOAD_URL : `${location.origin}${LOCATION_PATH}${VITE_APP_DOWNLOAD_URL}`
const FIX_KKFILE_URL = PREVIEW_URL.startsWith('http') ? PREVIEW_URL : `${location.origin}${LOCATION_PATH}${PREVIEW_URL}`
// 下载
const handleDownLoad = (item: any) => {
  loading.value = true
  const url = setFileUrl(item[props.defaultFields.url])
  downloadGetFile(url, item[props.defaultFields.name])
  nextTick(() => {
    loading.value = false
  })
}

const handlePreview = (item: any) => {
  show.value = true
  fileObj.value = { ...item }
}

const downloadGetFile = (url: any, fileName: any) => {
  const x = new window.XMLHttpRequest()
  x.open('GET', url, true)
  x.responseType = 'blob'
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response)
    const a = document.createElement('a')
    a.href = url
    a.download = fileName
    a.click()
    a.style.display = 'none'
  }
  x.send()
}
// 格式化文件大小
const formateSize = (item: any) => {
  if (Number(item[props.defaultFields.size]) / 1024 < 1)
    return `${Number(item[props.defaultFields.size])}b`

  if (
    Number(item[props.defaultFields.size]) / 1024 > 1
    && Number(item[props.defaultFields.size]) / 1024 / 1024 < 1
  )
    return `${(Number(item[props.defaultFields.size]) / 1024).toFixed(2)}kb`

  if (Number(item[props.defaultFields.size]) / 1024 / 1024 >= 1) {
    return `${(Number(item[props.defaultFields.size]) / 1024 / 1024).toFixed(
      2
    )}M`
  }
}
</script>

<template>
  <div class="file-content">
    <div
      v-for="(item, index) in fileList"
      :key="index"
      v-loading="loading"
      :class="`file-item ${
        showDownloadBtn ? 'primary-f hover-css' : 'black-f-09'
      }`"
    >
      <span class="file-name">
        <span
          v-if="titleIsClick"
          class="canClick"
          @click="handleDownLoad(item)"
        >{{ item.name }}</span>
        <span v-else>{{ item.name }}</span>
        <span v-if="showFileSize"> ({{ formateSize(item) }})</span>
      </span>
      <el-icon
        v-if="showDownloadBtn"
        class="file-url"
        title="下载"
        @click="handleDownLoad(item)"
      >
        <Download />
      </el-icon>
      <el-icon v-if="showPreviewBtn" class="file-url" title="预览">
        <View @click="handlePreview(item)" />
      </el-icon>
    </div>
    <IkFile
      v-model="show"
      :load-url="FIX_LOAD_URL"
      :url="fileObj?.url"
      :kk-url="FIX_KKFILE_URL"
      :file-name="fileObj?.name"
    />
  </div>
</template>

<style lang="scss" scoped>
.img-css {
  width: 200;
  height: 200;
}

.file-item {
  font-size: 14px;

  .file-name {
    width: 91%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .canClick {
    color: var(--el-color-primary);
  }

  .canClick:hover {
    cursor: pointer;
  }

  .file-url {
    font-size: 16px;
    color: var(--el-color-primary);
    cursor: pointer;
  }
}

.hover-css {
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}
</style>
